<template>
  <div class="rx-layout-menu">
    <t-menu
      theme="light"
      :value="activeMenu"
      class="h100vh!"
      :collapsed="collapsed"
      :expand-mutex="true"
      v-model:expanded="activeMenuExpanded"
    >
      <template #logo>
        <img
          class="logo transition-all-300"
          :style="{ height: '34px', width: collapsed ? '35px' : '136px' }"
          :src="iconUrl"
          alt="logo"
        />
      </template>
      <side-bar-item
        v-for="(route, index) in sidebarRouters"
        :key="route.path + index"
        :item="route"
        :base-path="route.path"
      />
    </t-menu>
  </div>
</template>
<script setup lang="ts">
import SideBarItem from '@/layouts/components/RxMenuSidebar/index.vue';
import { usePermissionStore } from '@/store/modules/permission.ts';
interface IProps {
  collapsed?: boolean;
}
const props = withDefaults(defineProps<IProps>(), {
  collapsed: true,
});

/**
 * =====================菜单解析显示逻辑===================================================
 */
const route = useRoute();
const usePermission = usePermissionStore();
const sidebarRouters = computed(() => {
  return usePermission.sidebarRouters;
});
const activeMenu: any = computed(() => {
  const { meta, path } = route;
  if (meta.activeMenu) {
    return meta.activeMenu;
  }
  return path;
});
// 配置项目菜单时一定要确保子菜单的第一级菜单和根级的地址名称要相同，否则会导致menu自动展开失效
const activeMenuExpanded = ref<string[]>([]);
watchEffect(() => {
  activeMenuExpanded.value = ['/' + activeMenu.value.split('/')[1]];
});
/**
 * =====================================================================================
 */

/**
 * ===================展开折叠逻辑========================================================
 */
const iconUrl = ref(
  'https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/logo%402x.png',
);

watch(
  [() => props.collapsed],
  () => {
    iconUrl.value = props.collapsed
      ? 'https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/logo%402x.png'
      : 'https://tdesign.gtimg.com/site/baseLogo-light.png';
  },
  {
    immediate: true,
  },
);
/**
 * =====================================================================================
 */
</script>
